<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon"  href="static/assets/images/logo-header-05.png"/>
    <!-- Site Title -->
    <title>搜索</title>
    <link rel="stylesheet" href="static/css/linearicons.css" th:href="@{/static/css/linearicons.css}">
    <link rel="stylesheet" href="static/css/font-awesome.min.css" th:href="@{/static/css/font-awesome.min.css}">
    <link rel="stylesheet" href="static/css/bootstrap.css" th:href="@{/static/css/bootstrap.css}">
    <link rel="stylesheet" href="static/css/owl.carousel.css" th:href="@{/static/css/owl.carousel.css}">
    <link rel="stylesheet" href="static/css/main.css" th:href="@{/static/css/main.css}">
    <style>
        /*回到顶部按钮样式*/
        #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: red;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        #myBtn:hover {
            background-color: #555;
        }

        /*弹层样式*/
        .layer_notice_parent {
            padding: 5%;
            height: 100%;
            width: auto;
            overflow-y: scroll;
            overflow-x: hidden;
            font-weight: 700;
            position: relative;
        }

        .layer_notice_child {
            margin-top: 20px;
        }

        /*删除按钮*/
        .layui-btn:hover {
            opacity: .8;
            filter: alpha(opacity=80);
            color: #fff;
        }

        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #FF5722;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            right: 20px;
            bottom: 15px;
        }

        .search_widget .input-group-addon, .top-section-area .input-group-addon {
            cursor: pointer;
            background-color: #e9ecef !important;
        }

        .search_widget .input-group-addon, .top-section-area .input-group-addon:hover {
            background-color: #a962b5 !important;
        }
    </style>
</head>
<body>

<!-- Start Header Area -->
<header class="default-header">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="" alt="" th:src="@{/static/img/logo.png}">
            </a>
        </div>
    </nav>
</header>
<!-- End Header Area -->

<!-- Start Search Area -->
<section class="top-section-area section-gap">
    <div class="container">
        <div class="row justify-content-center align-items-center d-flex">
            <div class="col-lg-12">
                <div id="imaginary_container">
                    <div class="input-group stylish-input-group input-group-prepend">

                        <div th:if="${type} eq 'highlight'">
                            <button type="button" class="btn btn-outline-light text-dark dropdown-toggle"
                                    data-toggle="dropdown">
                                <span style="color: #ff4824">高亮</span>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="" th:href="@{/}">普通</a>
                            </div>
                        </div>

                        <div th:if="${type} eq 'simple'">
                            <button type="button" class="btn btn-outline-light text-dark dropdown-toggle"
                                    data-toggle="dropdown">
                                普通
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="" th:href="@{/highlight}"> <span style="color: #ff4824">高亮</span></a>
                            </div>
                        </div>
                        <input type="text" class="form-control" placeholder="输入关键字搜索" value="" required="" id="keyword">
                        <span class="input-group-addon search_button">
                                        <button type="button" style="border: none" onclick="search();">
                                            <span class="lnr lnr-magnifier" style="border: none"></span>
                                        </button>  
                                    </span>
                    </div>
                </div>
                <p class="mt-20 text-center text-white" style="display: block" id="reFileDataImport">
                    <button type="button" class="btn btn-outline-light text-dark" onclick="reIndex()">重新生成索引库</button>
                    <button type="button" class="btn btn-outline-light text-dark" onclick="delIndex(0)">清空索引库</button>
                </p>
            </div>
        </div>
    </div>
</section>
<!-- End top-section Area -->


<!-- Start post Area -->
<div class="post-wrapper pt-100" style="min-height: 700px;">
    <!-- Start post Area -->
    <section class="post-area">
        <div class="container">
            <div class="row justify-content-center d-flex">
                <div class="col-lg-12">
                    <div class="post-lists search-list" id="coreDiv">


                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End post Area -->
</div>
<!-- End post Area -->

<!-- start footer Area -->
<footer class="footer-area section-gap">
    <div class="container">
        <div class="row">
            <div class="col-lg-6  col-md-12">
                <div class="single-footer-widget newsletter">
                    <h6>Elasticsearch搜索页面</h6>
                    <p>微信：xxxxxx</p>
                    <p>邮箱：xxxxxx</p>
                    <p>© 2019. Elasticsearch B.V. All Rights Reserved</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- End footer Area -->

<!-- template start -->
<div class="single-list flex-row d-flex" id="contentDiv" style="display: none">
    <!--<div class="thumb">
        <img th:src="@{/static/img/asset/l2.jpg}" alt="">
    </div>-->
    <div class="detail">
        <div id="title" style="cursor: pointer">
            <!--文章标题-->
        </div>
        <p id="content">
            <!--内容-->
        </p>
<!--        <p class="footer pt-20" style="padding: 10px">-->

        <p href="javascript:void(0)" id="createTime" style="margin-bottom: 15px">
            <!--创建时间-->
        </p>

        <a href="javascript:void(0)" id="dataId" style="margin-bottom: 15px">
            <!--id-->
        </a>
        <a href="javascript:void(0)" id="dataScore" style="margin-bottom: 15px;margin-left: 20px">
            <!--分数-->
        </a>
        </p>
    </div>
</div>
<!--返回顶部开始-->
<button onclick="topFunction()" id="myBtn" title="回顶部">top</button>

<!--<div style="background-color:black;color:white;padding:30px">向下滑动</div>-->
<!--<div style="background-color:lightgrey;padding:30px 30px 2500px">该实例演示了如何实现网页返回顶部效果。</div>-->
<script>
    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        var height = document.body.clientHeight + 400;
        if (document.body.scrollTop > height || document.documentElement.scrollTop > 400) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    // 点击按钮，返回顶部
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<!--返回顶部结束-->
<!-- template end -->

<script src="static/js/vendor/jquery-2.2.4.min.js" th:src="@{/static/js/vendor/jquery-2.2.4.min.js}"></script>
<script src="static/js/vendor/jquery-2.2.4.min.js" th:src="@{/static/js/vendor/popper.min.js}"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"-->
<!--        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"-->
<!--        crossorigin="anonymous"></script>-->
<script src="static/js/vendor/bootstrap.min.js" th:src="@{/static/js/vendor/bootstrap.min.js}"></script>
<script src="static/js/jquery.ajaxchimp.min.js" th:src="@{/static/js/jquery.ajaxchimp.min.js}"></script>
<script src="static/js/parallax.min.js" th:src="@{/static/js/parallax.min.js}"></script>
<script src="static/js/owl.carousel.min.js" th:src="@{/static/js/owl.carousel.min.js}"></script>
<script src="static/js/jquery.magnific-popup.min.js" th:src="@{/static/js/jquery.magnific-popup.min.js}"></script>
<script src="static/js/jquery.sticky.js" th:src="@{/static/js/jquery.sticky.js}"></script>
<script src="static/js/main.js" th:src="@{/static/js/main.js}"></script>
<script src="static/js/layer/layer.min.js" th:src="@{/static/js/layer/layer.min.js}"></script>
<script src="static/js/layui/layui.js" th:src="@{/static/js/layui/layui.js}"></script>

<script>
    var SUCCESS_CODE = "success";

    /*<![CDATA[*/
    var ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
    var type = "[[${type}]]";

    function search() {
        var keyword = $("#keyword").val();

        // if ($.trim(keyword) === "") {
        //     layer.msg("关键字输入再查看吧!");
        //     // return;
        //     $("#keyword").val("all");
        //     keyword = "all";
        // }


        var url = ctxPath + "query?keyword=" + keyword;
        if (type === "highlight") {
            url = ctxPath + "query_hit?keyword=" + keyword
        }
        // if ($.trim(keyword) === "") {
        //     url = ctxPath + "getAll";
        // }

        // var index = layer.load(2);
        // var index = layer.load(2, {time: -1}); //又换了种风格，并且设定最长等待10秒
        //加载层-风格4

        var index = layer.msg('搜索加载中...', {
            time: -1, icon: 16, shade: 0.5
        });
        $.get(url, function (response) {
            var result = response.data;
            console.log(response);
            layer.close(index);
            $("#coreDiv").empty();
            if (!result || result.length < 1) {
                layer.msg('换个关键词试试吧-.-', {time: 2000, icon: 5});
            }
            $.each(result, function (i, data) {
                var template = $("#contentDiv").clone();
                // 1、标题
                if (data.productName) {
                    <!--文章标题-->
                    template.find("#title").html(
                        "  <h5 class='pb-20' " +
                        "onclick='getById(" + data.id + ")'> <a>索引名称：" + data.productName + "</a></h5>"
                    );
                }
                // 2、内容
                template.find("#content").html(data.productDesc);
                template.find("#createTime").text("创建时间：" + data.createTime);
                template.find("#dataId").html("索引Id：" + data.id);
                if (data.score) {
                    template.find("#dataScore").text("命中分数：" + data.score);
                }
                template.show();
                var html = template.html().replace(new RegExp('undefined', 'gm'), '')
                $("#coreDiv").append(html);
            })

        })

    }

    /**
     * 重新生成索引
     */
    function reIndex() {
        var index = layer.msg('生成中，请稍后', {
            time: -1, icon: 16, shade: 0.5
        });
        var url = ctxPath + "/reCreateSimple";
        $.get(url, function (response) {
            layer.close(index);
            layer.msg(response.code);
            layer.msg("3s 后进行重新查询");
            setTimeout(search, 3000);
        });

    }

    //清空单条或所有索引
    function delIndex(id) {
        //删除所有
        if (id === 0) {
            var index = layer.msg('正在清空，请稍后...', {
                time: -1, icon: 16, shade: 0.5
            });
            var url = ctxPath + "/deleteAll";
            $.get(url, function (response) {
                layer.close(index);
                layer.msg(response.code);
            })
        } else {
            var index = layer.msg('正在删除，请稍后...', {
                time: -1, icon: 16, shade: 0.5
            });
            var url = ctxPath + "/delete/" + id;
            $.get(url, function (response) {
                layer.close(index);
                if (SUCCESS_CODE === response.code) {
                    setTimeout(layer.closeAll(), 1000);
                }
                layer.msg(SUCCESS_CODE);
            });

        }
    }

    /**
     * 根据es索引主键查询
     * @param id
     */
    function getById(id) {
        if (!id) {
            layer.msg('id没有啊~.~', {time: 2000, icon: 6});
        }
        var url = ctxPath + "get/" + id;
        $.get(url, function (response) {
                var data = response.data;
                var content = '<div class="layer_notice_parent">' +
                    '<ul >' +
                    '<li class="layer_notice_child"><a href="javascript:void(0)"><h5>索引id' + data.id + '</h5></a></li>' +
                    '<li class="layer_notice_child"><a href="javascript:void(0)"><h5>名称' + data.productName + '</h5></a></li>' +
                    '<li class="layer_notice_child"><a href="javascript:void(0)"><h5>描述' + data.productDesc + '</h5></a></li>' +
                    '<li class="layer_notice_child"><a href="javascript:void(0)"><h5>时间' + data.createTime + '</h5></a></li>' +
                    '</ul>' +
                    '<button class="layui-btn layui-btn-danger" onclick="delIndex(' + data.id + ')">删除记录</button>' +
                    '</div>';

                layer.open({
                    type: 1,
                    // shade: false, 全透明或者全黑
                    shade: 0.5,
                    area: ['700px', '450px'],
                    title: false, //不显示标题
                    content: content, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    cancel: function () {
                        // layer.msg('看看其他的吧-.-', {time: 2000, icon: 6});
                    }
                });
            }
        )
    }

    /**
     * 页面初始化执行
     */
    $(function () {
        $("#keyword").val("");
        //搜索
        search();
        //返回顶部
        scrollFunction()
        document.onkeydown = function (e) {
            var ev = document.all ? window.event : e;
            if (ev.keyCode === 13) {
                search();

            }
        }
    });
</script>

</body>
</html>